let arr = [{
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400506629423.jpg",
    name: "a**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400540139692.jpg",
    name: "T**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400540118251.jpg",
    name: "慧**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400540069242.jpg",
    name: "b**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400681111127.jpg",
    name: "宏**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400865596453.jpg",
    name: "宋**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400902911909.jpg",
    name: "寻**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400953029599.jpg",
    name: "雪**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400989455804.jpg",
    name: "慧**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401005976517.jpg",
    name: "杨**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218400968714979.jpg",
    name: "宏**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401035049758.jpg",
    name: "红**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401049432628.jpg",
    name: "张**",
    content: "已扫描二维码咨询"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401077574176.jpg",
    name: "彩**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401130741871.jpg",
    name: "张**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401189588504.jpg",
    name: "一**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401847533545.jpg",
    name: "周**",
    content: "已通过咨询成功下单"
}, {
    picture: "http://yw-yx.oss-cn-hangzhou.aliyuncs.com/ywwl-jylesson/2019/08/52218401796465344.jpg",
    name: "朱**",
    content: "已通过咨询成功下单"
}]

function addcssToDeng(){
     document.getElementsByClassName('message-tip-list')[0].classList.add('active');//给第一个添加类名

        // 给倒数第一个添加类名
     document.getElementsByClassName('message-tip-list')[document.getElementsByClassName('message-tip-list').length - 1].classList.add('active-before');

        // 给倒数第二个添加类名
     document.getElementsByClassName('message-tip-list')[document.getElementsByClassName('message-tip-list').length - 2].classList.add('active-out');


}


function loop(){
    var active=document.getElementsByClassName("active");//获取当前显示
    var active_before=document.getElementsByClassName('active-before');//获当前下一个
    var active_out=document.getElementsByClassName('active-out');//获当前下两个
    var tip_list = document.getElementsByClassName('message-tip-list');//获取全部的元素

    var active_next=active[0].nextElementSibling; //获取第一个显示的下一个元素
    var before_next=active_before[0].nextElementSibling; //获取倒数第一个显示的下一个元素
    var out_next=active_out[0].nextElementSibling;//获取倒数第二个显示的下一个元素

    //判断如果倒数第一个   最后一个再往下就没有了  所以变成第一个    倒数第二个 第一次是最后一个  但是再下一个就是没有了  没有时为第一个这样就循环起来了    
    if (before_next == null) {
        before_next = tip_list[0];
    }  else if (out_next == null) {
        out_next = tip_list[0];
    } else if (active_next == null) { //第一个也会一直下一个也会到最后一个的 所以也给一个判断
        active_next = tip_list[0];
    }

    //删除当前的 给下一个赋值
    active_out[0].classList.remove('active-out');
    out_next.classList.add("active-out");
    active_before[0].classList.remove("active-before");
    before_next.classList.add("active-before");
    active[0].classList.remove("active");
    active_next.classList.add("active");
}

var boarddiv='';
for (let i = 0; i < arr.length; i++) {
    boarddiv+=
    `<div  class="message-tip-list">
            <span  class="message-tip-pic">
                <img  src="${arr[i].picture}" alt="">
            </span>
            <span  class="message-tip-text">${arr[i].name} ${arr[i].content}</span>
        </div>
    `;
}

$(".message").append(boarddiv);
addcssToDeng();
setInterval(loop,3000)